<!--
 * @Author       : ly
 * @Date         : 2021-07-06 09:34:18
 * @LastEditors  : ly
 * @Description  : 自定义树形组件
-->
<template>
  <ul class="vue-tree">
    <TreeItem
      v-for="(item, index) in treeData"
      :key="index"
      :treeItemData="item"
      :tree-click-event="treeClickEvent"
      :edit-trigger="editTrigger"
      :opList="opList"
      :permission="permission"
    ></TreeItem>
  </ul>
</template>

<script>
  import TreeItem from './TreeItem'
  export default {
    name: 'VueTreeMenu',
    components: {
      TreeItem,
    },
    props: {
      // 树形控件数据
      treeData: {
        type: Array,
        default() {
          return []
        },
      },
      // 节点点击事件
      treeClickEvent: {
        type: Function,
        default() {
          return function () {}
        },
      },
      // 节点操作点击事件
      editTrigger: {
        type: Function,
        default() {
          return function () {}
        },
      },
      // 操作列表
      opList: {
        type: Array,
        default: () => [],
      },
      // 权限判断
      permission: {
        type: String,
        default: () => '',
      },
    },
    methods: {
      /* editInfoTrigger(treeItemData) {
        this.$emit('editInfoTrigger', treeItemData)
      }, */
    },
  }
</script>

<style lang="less" scoped>
  .vue-tree {
    max-width: 440px;
    padding: 0;
    margin: 0;
    list-style: none;
    // /deep/ .tree-item {
    //   cursor: pointer;
    //   transition: background-color 0.2s;
    //   font-size: 14px;
    //   .tree-content {
    //     position: relative;
    //     padding: 12px 0;
    //     padding-left: 45px;
    //     border-bottom: 1px solid #eee;
    //     &:hover {
    //       background-color: #e6fffb;
    //       color: #13c2c2;
    //     }
    //   }
    //   .expand-arrow {
    //     position: absolute;
    //     top: 50%;
    //     left: 24px;
    //     width: 16px;
    //     height: 16px;
    //     transform: translateY(-50%);
    //     cursor: pointer;
    //     &::after {
    //       position: absolute;
    //       top: 50%;
    //       left: 50%;
    //       display: block;
    //       content: ' ';
    //       border-width: 5px;
    //       border-style: solid;
    //       border-color: transparent;
    //       border-left-color: #ccc;
    //       margin: -5px 0 0 -2.5px;
    //       transition: all 0.4s;
    //     }
    //   }
    //   &.expand {
    //     & > .tree-content {
    //       // background-color: #47ba8e;
    //       // color: #fff;
    //       & > .expand-arrow {
    //         &::after {
    //           transform: rotate(90deg);
    //           margin: -2.5px 0 0 -5px;
    //         }
    //       }
    //     }
    //   }
    //   .tree-label {
    //     height: 28px;
    //     line-height: 28px;
    //     font-size: 14px;
    //   }
    //   .edit {
    //     position: absolute;
    //     top: 46%;
    //     right: 30px;
    //     width: 16px;
    //     height: 16px;
    //     transform: translateY(-50%);
    //     cursor: pointer;
    //     img {
    //       width: 100%;
    //       height: 100%;
    //     }
    //   }
    //   .sub-tree {
    //     display: none;
    //     list-style: none;
    //     padding: 0 0 0 28px;
    //     margin: 0;
    //   }
    //   &.expand > .sub-tree {
    //     display: block;
    //   }
    //   &.no-child {
    //     & > .tree-content {
    //       /* padding-left: 0; */
    //       & > .expand-arrow {
    //         display: none;
    //       }
    //     }
    //   }

    //   .actived {
    //     background-color: #47ba8e;
    //     color: #fff;
    //     &:hover {
    //       background-color: #47ba8e;
    //       color: #fff;
    //     }
    //   }
    // }
  }
</style>
